<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<style>
	div{width:300px;
	height:400px;
	background: yellow;
	position:relative;
	animation:myfirst 20s;
	-webkit-animation:myfirst 10s; /* Safari and Chrome */}
	@keyframes myfirst
{
	10%   {background:lightpink; left:0px; top:0px;}
	20%  {background:lightgreen; left:500px; top:200px;}
	30%  {background:skyblue; left:0px; top:500px;}
	40%  {background:orange; left:500px; top:200px;}
	50% {background:cornflowerblue; left:0px; top:0px;}
	60%   {background:white; left:0px; top:0px;}
	70%  {background:lightgreen; left:0px; top:500px;}
	80%  {background:skyblue; left:500px; top:500px;}
	90%  {background:purple; left:500px; top:0px;}
	100% {background:cornflowerblue; left:0px; top:0px;}
}
 {
		  width: 100px;
          height: 200px;
	     -webkit-transition: width 4s, height 5s, -webkit-transform 5s; /* For Safari 3.1 to 6.0 */
        }
       
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:white; left:0px; top:0px;}
	25%  {background:lightgreen; left:200px; top:0px;}
	50%  {background:skyblue; left:200px; top:200px;}
	75%  {background:hotpink; left:0px; top:200px;}
	100% {background:cornflowerblue; left:0px; top:0px;}
}

 div:hover
        {
	     width: 400px;
         height: 500px; 
	     -webkit-transform: rotate(145deg); /* Chrome, Safari, Opera */
        }
</style>
	</head>
	
	<body>
		<h1>THIS IS MY FIRST SVG</h1>
		<p>ONE STEP : put the mouse on the pattern and it will overturn.</p>
		<p>TWO STEP : the pattern will move around all the time.</p>
		<div class="lanren">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="air-freshener" class="svg-inline--fa fa-air-freshener fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="green" d="M378.94 321.41L284.7 224h49.22c15.3 0 23.66-16.6 13.86-27.53L234.45 69.96c3.43-6.61 5.55-14 5.55-21.96 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 7.96 2.12 15.35 5.55 21.96L36.22 196.47C26.42 207.4 34.78 224 50.08 224H99.3L5.06 321.41C-6.69 333.56 3.34 352 21.7 352H160v32H48c-8.84 0-16 7.16-16 16v96c0 8.84 7.16 16 16 16h288c8.84 0 16-7.16 16-16v-96c0-8.84-7.16-16-16-16H224v-32h138.3c18.36 0 28.39-18.44 16.64-30.59zM192 31.98c8.85 0 16.02 7.17 16.02 16.02 0 8.84-7.17 16.02-16.02 16.02S175.98 56.84 175.98 48c0-8.85 7.17-16.02 16.02-16.02zM304 432v32H80v-32h224z"></path></svg>
	</body>
</html>